<template>
  <div class="main">
    <section>
      <search-form
        :listQuery="queryParams"
        :queryConfig="queryConfig"
        :labelWidth="100"
        :search="search"
      />
      <el-table
        v-loading="loading"
        :data="list"
        element-loading-text="给我一点时间"
        border
        fit
        header-row-class-name="table-header"
        highlight-current-row
      >
        <el-table-column
          align="center"
          label="日期"
          width="130"
        >
          <template slot-scope="scope">
            <span>{{scope.row.statTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="唯品会订单数"
          width="130"
        >
          <template slot-scope="scope">
            <span>{{scope.row.vopTradeNum|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="唯品会订单最大预估佣金"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.vopCommission|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="唯品会用户应发预估佣金"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.vopPayCommission|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="京东订单数"
          width="130"
        >
          <template slot-scope="scope">
            <span>{{scope.row.jdTradeNum|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="京东订单最大预估佣金"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.jdCommission|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="京东用户应发预估佣金"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.jdPayCommission|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="淘宝订单数"
          width="130"
        >
          <template slot-scope="scope">
            <span>{{scope.row.aliTradeNum|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="淘宝订单最大预估佣金"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.aliCommission|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="淘宝用户应发预估佣金"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.aliPayCommission|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="拼多多订单数"
        >
          <template slot-scope="scope">
            <span>{{scope.row.pddTradeNum|| 0}}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="拼多多最大预估佣金"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.pddCommission|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="拼多多用户应发预估佣金"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.pddPayCommission|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="总计订单数"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{scope.row.allTradeNum|| 0}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="总计预估佣金"
          width="110"
        >
          <template slot-scope="scope">{{scope.row.allCommission|| 0}}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="总应付预估佣金"
          width="110"
        >
          <template slot-scope="scope">{{scope.row.allPayCommission || 0}}</template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>
<script>
import searchForm from '@/components/searchForm/index'
import { getTradeStat } from '@/api/bihuasuan/order'
import moment from 'moment'
export default {
  name: 'b-orderStatistics',
  components: {
    searchForm
  },
  data() {
    return {
      queryParams: {
        endTime: '',
        startTime: '',
        createDate: ''
      },
      queryConfig: [
        {
          prop: 'createDate',
          type: 'daterange',
          label: '统计时间'
        }
      ],
      loading: true,
      listTotal: 0,
      list: []
    }
  },
  created() {
    this.initQueryDate()
    this.getList()
  },
  methods: {
    initQueryDate() {
      this.queryParams.endTime = moment()
        .subtract(1, 'days')
        .format('YYYY-MM-DD 23:59:59')
      this.queryParams.startTime = moment()
        .subtract(7, 'days')
        .format('YYYY-MM-DD 00:00:00')
    },
    async getList() {
      this.loading = true
      try {
        const { data } = await getTradeStat(this.queryParams)
        this.loading = false
        this.list = data
        this.listTotal = data.total
      } catch (error) {
        console.log(error)
        this.list = []
        this.listTotal = 0
        this.loading = false
      }
    },

    search() {
      if (this.queryParams.createDate && this.queryParams.createDate[0]) {
        this.queryParams.startTime =
          this.queryParams.createDate[0] + ' 23:59:59'
        this.queryParams.endTime = this.queryParams.createDate[1] + ' 00:00:00'
      } else {
        this.initQueryDate()
      }

      this.getList()
    }
  }
}
</script>

 